<template>
  <div class="editAddressBox">
    <div class="editArea itemStyle">
      <span><i>*</i>所在地区：</span>
      <div class="rightForm">
        <el-cascader
          size="large"
          :options="regionData"
          v-model="areaCode"
          @change="addressChange"
        />
      </div>
    </div>
    <div class="itemStyle">
      <span><i>*</i>详细地址：</span>
      <div class="rightForm">
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入地址"
          resize="none"
          v-model="data.address"
          maxlength="60" />
      </div>
    </div>
    <div class="itemStyle">
      <span><i>*</i>收货人姓名：</span>
      <div class="rightForm">
        <el-input v-model="data.receiveName" maxlength="20" placeholder="请输入内容" />
      </div>
    </div>
    <div class="itemStyle">
      <span><i>*</i>手机号码：</span>
      <div class="rightForm">
        <el-input v-model="data.receivePhone" maxlength="11" placeholder="请输入内容" />
      </div>
    </div>
    <div class="itemStyle">
      <span></span>
      <div class="rightForm">
        <el-checkbox :false-label="0" :true-label="1" v-model="data.ifDefault">设置为默认收货地址</el-checkbox>
      </div>
    </div>
    <div class="dialogFooter">
      <el-button @click="$emit('cancelAdd')">取 消</el-button>
      <el-button class="saveBtn" @click="newAddressData">确 定</el-button>
    </div>
  </div>
</template>

<script setup>
import { defineComponent, shallowRef, toRefs } from 'vue'
import { regionData, CodeToText } from 'element-china-area-data'
import { useUser } from '@/store/user'

defineComponent({
  name: 'AddAddress'
})
const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  }
})
const emit = defineEmits(['hideAddDialog', 'cancelAdd'])
const userStore = useUser()
const { areaCode } = toRefs(userStore)
let areaData = shallowRef('');

function addressChange (arr) {
  areaData.value = `${CodeToText[arr[0]]}-${CodeToText[arr[1]]}-${CodeToText[arr[2]]}`
}

let { data } = toRefs(props);
const rules = {}

function newAddressData () {
  if (data.value.receiveAdress !== '') {
    if (data.value.address === '') {
      ElMessage.error('请填写详细地址!')
    } else if (data.value.receiveName === '') {
      ElMessage.error('请填写收件人姓名!')
    } else if (data.value.receivePhone === '') {
      ElMessage.error('请填写手机号码!')
    } else {
      let reg = /^1[13456789]\d{9}$/
      if (!reg.test(data.value.receivePhone)) {
        ElMessage.error('手机号格式错误')
        return
      }
      data.value.receiveAdress = areaData.value
      emit('hideAddDialog')
    }
  } else {
    if (areaData.value === '') {
      ElMessage.error('请选择地区!')
    } else if (data.value.address === '') {
      ElMessage.error('请填写详细地址!')
    } else if (data.value.receiveName === '') {
      ElMessage.error('请填写收件人姓名!')
    } else if (data.value.receivePhone === '') {
      ElMessage.error('请填写手机号码!')
    } else {
      let reg = /^1[13456789]\d{9}$/
      if (!reg.test(data.value.receivePhone)) {
        ElMessage.error('手机号格式错误')
        return
      }
      data.value.receiveAdress = areaData.value
      emit('hideAddDialog')
    }
  }
}
</script>

<style lang="scss" scoped>
.editAddressBox {
  padding: 0 100px;
  .itemStyle {
    display: flex;
    margin-bottom: 20px;
    span {
      width: 100px;
      margin-right: 20px;
      text-align: right;
      padding-top: 5px;
    }
    i {
      color: red;
      margin-right: 3px;
    }
    .rightForm {
      flex: 1;
      :deep(.el-cascader){
        width: 100%;
      }
      :deep(.el-checkbox__label){
        font-size: 12px;
        font-family: Microsoft YaHei;
        color: #C5AA7B;
      }
    }
  }
    .dialogFooter {
      display: flex;
      justify-content: center;
      width: 100%;
      .el-button{
        width: 200px;
        height: 50px;
        background: #F3F4F5;
        border-radius: 0px;
        padding: 0;
      }
      .saveBtn{
        color: $mainGlod;
        background-color: #333333;
        border: 1px solid transparent;
      }
    }
  :deep(.icon-arrow-down::before) {
    display: none;
  }
}
</style>
